import React, { Component } from 'react'
/*
    1. 安装 cnpm i prop-types 用来做属性验证
    2. 导入属性验证的插件 import PropTypes from 'prop-types'
    3. 组件名.propTypes 然后配置属性的类型
    
    // 给函数式组件添加属性的验证
    // ***** 设置的时候要使用小写的 propTypes
    // ***** 设置数据类型的时候使用大写的 PropTypes
    Header.propTypes = {
        // 做属性的验证
        // 指定 title 的类型为 string
        title: PropTypes.string,
        // 指明 num 的类型为 number
        num: PropTypes.number,
        // oneOfType 指明 sex 可以是多类型
        sex: PropTypes.oneOfType([
            PropTypes.string,
            // bool 是布尔类型的数据
            PropTypes.bool
        ]).isRequired,
        // 设置数据为必填项
        age: PropTypes.number.isRequired
    }

*/ 

import PropTypes from 'prop-types'


const Header = (props)=>{
    console.log(props);
    return (<>
        <div> 
            欢迎来到 {props.title} 
        </div>
    </>)
}
// 给函数式组件添加属性的验证
// ***** 设置的时候要使用小写的 propTypes
// ***** 设置数据类型的时候使用大写的 PropTypes
Header.propTypes = {
    // 做属性的验证
    // 指定 title 的类型为 string
    title: PropTypes.string,
    // 指明 num 的类型为 number
    num: PropTypes.number,
    // oneOfType 指明 sex 可以是多类型
    sex: PropTypes.oneOfType([
        PropTypes.string,
        // bool 是布尔类型的数据
        PropTypes.bool
    ]).isRequired,
    // 设置数据为必填项
    age: PropTypes.number.isRequired
}

class Content extends Component {
    render(){
        return (<>
           { this.props.title } 的小伙伴长得都很好看
        </>)
    }
}
Content.propTypes = {
    title: PropTypes.string
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Header title='H5-2303' sex='' age={18}> </Header>

        <Content title='H5-2303' />
      </div>
    )
  }
}
